<template>
  <div style="background: #fff">
    <div class="title">
      <div>{{ title }}</div>
    </div>
     <div style="text-align:left">
      <el-form :inline="true">
        <el-form-item label="激活状态">
          <el-select v-model="query.status" placeholder="请选择"  clearable>
            
            <el-option
              v-for="item in status"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
           <el-button type="success" @click="getData(true)">查询</el-button>
          <el-button type="primary" @click="showEdit" v-if="admin_type==1">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="data"
      stripe
      style="width: 100%; margin-bottom: 1.875rem"
    
    >
      </el-table-column>
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="name" label="邀请码"></el-table-column>
      
      <el-table-column label="激活人头像" v-if="query.status==2">
          <template slot-scope="scope">
            <el-image
              :src="
                cdn+scope.row.user.icon +
                '?imageView2/1/w/50/h/50/format/webp/q/75|imageslim'
              "
              style="width:50px;height:50px"
              :preview-src-list="[cdn+scope.row.user.big_icon]"
            >
            </el-image>
          </template>
        </el-table-column>
         <el-table-column label="激活人昵称" v-if="query.status==2">
        <template slot-scope="scope">
          {{scope.row.user.nick_name}}
        </template>
      </el-table-column>
       <el-table-column label="状态">
        <template slot-scope="scope">
          {{['未激活','已激活'][(scope.row.status-1)]}}
        </template>
      </el-table-column>
       <el-table-column label="操作" v-if="query.status==1">
        <template slot-scope="scope">
          <el-button size="small" @click="showSend(scope.row)">赠送</el-button>
          
        </template>
      </el-table-column>
     
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pages.currentPage"
     
      :page-size="pages.per_page"
      layout="total,prev, pager, next"
      :total="pages.total"
      style="text-align: center"
    >
    </el-pagination>

    

    <el-dialog title="赠送会员" :visible.sync="sendModal" width="40%" :close-on-click-modal='false'>
        <el-form :model="item">
        
          <el-form-item label="赠送者手机号">
            <el-input v-model="phone" autocomplete="off" clearable></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="sendModal = false">取 消</el-button>
          <el-button type="primary" @click="sendCode">确 定</el-button>
        </div>
      </el-dialog>
  
  </div>
</template>

<script>
import mixin from "../../js/mixin";

export default {
  name: "msg",
  mixins: [mixin],
  data() {
    return {
      is_page: true,
      sendModal:false,
      api_url: "code",
      query: {
        status: 1,
      },
      phone:'',
      status: [
        {
          id: 1,
          name: "未激活",
        },
        {
          id: 2,
          name: "已激活",
        },
      ],
    };
  },
  components: {},
  mounted() {},
  created() {
    this.title = this.$route.meta.title;
    this.admin_type = localStorage.getItem('admin_type')
    this.init();
  },
  methods: {
    init() {
      this.getData(true);
    },
    showSend(e){
      this.item = e
      this.sendModal = true
    },

    showEdit() {
      this.item = {};
      this.edit();
    },
    sendCode(){
      let query = {
        phone:this.phone,
        code_id:this.item.id
      }
       this.global.httpRequest('user/sendCode', query,'post').then((res) => {
        let {
          code
        } = res
        if (code == 0) {
          this.editModal = false
          this.getData()
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
